<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 200px;
        height: 100px;
        background-color: rgb(196, 194, 194);
        /* 通过定位使其移动 */
        position: absolute;
        left: 300px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p>窗口</p>
    </div>
  </body>
  <script>
    /* 
        需求：创建一个div块，用鼠标事件实现拖拽功能。
        1）当鼠标放在div块上时，按下鼠标左键并移动鼠标，div块随之运动；
        2）当松开鼠标左键，div块停止运动
    */
    // 获取DOM
    var oBxo = document.getElementById("box");

    // 获取窗口可视区的宽度，高度,避免移动越界
    var wH = window.innerHeight,
      wW = window.innerWidth;
    // console.log(wW, wH);

    //在box中点击
    oBxo.onmousedown = function (e) {
      //处理兼容
      var e = e || window.event;

      //获取鼠标点击位置距离oBox边框盒的距离
      var distanceX = e.clientX - this.offsetLeft;
      var distanceY = e.clientY - this.offsetTop;
      // console.log(distanceX, distanceY);

      //鼠标在文档中移动
      document.onmousemove = function (event) {
        // 兼容处理
        var ev = event || window.event;
        // 获取鼠标在文档中的位置-点击时鼠标在oBox内的距离=oBox要移动的距离
        var left = ev.clientX - distanceX;
        var top = ev.clientY - distanceY;

        //不允许操作的DOM超出可视区
        // 判断是否越界，进行越界处理
          // 如果box需要向左移动的值为负值则不向左移动
        if (left < 0) left = 0;
          // 如果box需要向上移动的值为负值则不向上移动
        if (top < 0) top = 0;
          // 如果box需要向右移动的值大于可视区宽度减去oBox的宽度则最大移动可视区宽度减去oBox的宽度
        if (left > wW - oBxo.offsetWidth) left = wW - oBxo.offsetWidth;
          // 如果box需要向下移动的值大于可视区宽度减去oBox的高度则最大移动可视区宽度减去oBox的高度
        if (top > wH - oBxo.offsetHeight) top = wH - oBxo.offsetHeight;

        // 通过定位改变其位置
        oBxo.style.left = left + "px";
        oBxo.style.top = top + "px";

        // 松下鼠标停止移动
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmousedown = null;
        };
      };
    };
  </script>
</html>
